<template>
  <div class="new-table-style">
    <el-table :border="true" :data="tableData" align="left">
      <el-table-column label="客户名称" width="350">
        <template slot-scope="scope">
          <div class="font-size-16">{{ scope.row.customerNames }}</div>
          <div v-if="scope.row.chargeItemName">
            <span>({{ scope.row.chargeItemName }}</span>
            <span v-if="scope.row.assetType">-{{ getSpaceName(scope.row.assetType) }})</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="资产编码" prop="chargeItemName"></el-table-column>
      <el-table-column label="账单周期">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleStartTime | formatDateTime('YYYY-MM-DD') }}</span
          ><br />
          <span>至</span><br />
          <span>{{ scope.row.cycleEndTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应缴费日期">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentDeadline | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="扣点租金(元)">
        <template slot-scope="scope">
          <span>{{ scope.row.amountReceivable | moneyFilterNoUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="doReport(scope.row)">填报</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="total > 0" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />

    <div class="absolute-box btn-box">
      <!-- <el-button type="primary" size="mini">导出</el-button> -->
    </div>

    <el-dialog title="填报" :visible.sync="dialogShow" width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
      <form-common :filed-list="rentReportList" ref="form" :formObj="model"></form-common>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false" class="el-button-reset">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { apiBillList, apiRentAmountWrite } from '../../../api/billManage';
  import { apiDepositList } from '../../../api/depositManage';
  import { rentReportList } from '../../../assets/form';
  import formCommon from '@g/components/form/formCommon.vue';
  import { requestTips,formDataDate } from '@/common/js/utils.js';

  export default {
    name: 'billTable',
    props: {
      activeTab: {
        type: String,
        default: '',
      },
      spaceTypeList: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        tableData: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        dialogShow: false,
        rentReportList: rentReportList,
        model: {},
      };
    },
    methods: {
      init() {
        this.getList();
      },

      //数据源
      async getList(more) {
        let res = await apiBillList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          queryType: this.activeTab,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //数据源
      async getList(more) {
        let res = await apiDepositList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          bizTypeList: ['deductionRent'],
        });
        res.rows.forEach(item => {
          item.billDate = formDataDate(item.cycleStartTime) + "至" + formDataDate(item.cycleEndTime)
        })
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //填报
      doReport(row) {
        let model = this.lodash.cloneDeep(row)
        model.amountReceivable = ""
        this.dialogShow = true;
        this.model = model;
      },

      //确认填报
      async confirmFn() {
        let model = this.$refs.form.validateForm();
        if (!model) return
        let params = {
          amountReceivable:model.amountReceivable,
          primaryKey:model.primaryKey,
        }
        let res = await apiRentAmountWrite(params);
        requestTips(res, () => {
          this.dialogShow = false;
          this.getList('more');
        });
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getList('more');
      },

      getSpaceName(key) {
        let target = this.spaceTypeList.find(item => item.key == key);
        return target ? target.value : '';
      },
    },

    components: { formCommon },
  };
</script>

<style lang="scss" scoped>
  .btn-box {
    right: 0;
    top: -45px;
  }
</style>
